<template>
  <div>
    <!-- 顶部信息栏 -->
    <div class="init-1">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t1">
            <span>神界人数</span>
            <p>1888</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t2">
            <span>今日陨落</span>
            <p>66</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t3">
            <span>今日飞升</span>
            <p>68</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="text t4">
            <span>管理员</span>
            <p>12</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 顶部信息栏End -->

    <!-- 区域栏目 -->
    <el-row :gutter="10">
      <!-- 快捷方式 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="init-2">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="tips">
              <h2>快捷方式</h2>
              <el-row :gutter="10">
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>神仙管理</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>祈愿管理</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>货币管理</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>日志管理</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>事件管理</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>内容管理</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>高级选项</p>
                  </a>
                </el-col>
                <el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
                  <a>
                    <i class="el-icon-menu"></i>
                    <p>系统管理</p>
                  </a>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="tips">
              <h2>待办事项</h2>
              <el-row :gutter="10">
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="coming">
                    <h4>人间祈愿</h4>
                    <p>66</p>
                  </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="coming">
                    <h4>货币遗留</h4>
                    <p>888</p>
                  </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="coming">
                    <h4>待回复</h4>
                    <p>17</p>
                  </div>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="coming">
                    <h4>待审阅</h4>
                    <p>33</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <!-- 快捷方式End -->
          <!-- 数据可视化区域 -->
          <el-col :span="24">
            <div class="tips">
              <el-row class="title">
                <el-col :span="12">
                  <h2>数据视图</h2>
                </el-col>
                <el-col :span="12" class="list">
                  <ul>
                    <li @click="show = true"><span></span></li>
                    <li @click="show = false"><span></span></li>
                  </ul>
                </el-col>
              </el-row>
              <div class="map">
                <barzoom v-show="show"></barzoom>
                <i-line v-show="!show"></i-line>
              </div>
            </div>
          </el-col>
          <!-- 数据可视化区域End -->
        </el-row>
      </el-col>
      <!-- 右侧信息区域 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="init-3">
        <div class="tips">
          <h2>快捷编辑</h2>
          <div class="draft">
            <el-form :model="draftForm" ref="draftForm">
              <el-form-item prop="text">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 15 }"
                  placeholder="请输入内容"
                  v-model="draftForm.text"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('numberValidateForm')"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="tips">
          <h2>指标达成率</h2>
          <div class="progress">
            <span>昨日飞升成功率：</span>
            <el-progress
              :percentage="percentage[0]"
              :color="customColor"
            ></el-progress>
            <span>今日飞升成功率：</span>
            <el-progress
              :percentage="percentage[1]"
              :color="customColors"
            ></el-progress>
          </div>
          <div class="map">
            <i-Gauge></i-Gauge>
          </div>
        </div>
      </el-col>
      <!-- 右侧信息区域End -->
    </el-row>
    <!-- 区域栏目End -->
  </div>
</template>

<script>
import barzoom from '../other/echarts/barzoom'
import iLine from '../other/echarts/index_line'
import iGauge from '../other/echarts/index_gauge'
export default {
  data() {
    return {
      show: true,
      // 草稿表单
      draftForm: {
        text: ''
      },
      // 进度条
      percentage: [40, 80],
      customColor: '#c20a0a',
      customColors: [
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  components: {
    barzoom,
    iLine,
    iGauge
  },
  created() {
  },
  methods: {
  },
  watch: {
    calendar() {
      console.log(111)
    }
  }
}
</script>

<style lang="less" scoped>
.init-1 {
  .text {
    text-align: center;
    border-radius: 10px;
    color: #fff;
    padding: 3vw 1vw;
    span {
      font-size: 16px;
    }
    p {
      font-size: 30px;
      font-weight: bold;
    }
    &.t1 {
      background-color: #f39800;
      background: var(--y-bg-color);
    }
    &.t2 {
      background-color: #330df2;
      background: var(--b-bg-color);
    }
    &.t3 {
      background-color: #21db66;
      background: var(--g-bg-color);
    }
    &.t4 {
      background-color: #c20a0a;
      background: var(--r-bg-color);
    }
  }
}

.init-2 {
  .tips {
    .el-row {
      .el-col {
        padding: 10px;
        a {
          display: inline-block;
          font-size: 1vw;
          padding-top: 2px;
          i {
            font-size: 40px;
            border-radius: 8px;
            color: var(--text-color);
            background-color: #f5f5f5;
            opacity: 0.6;
            padding: 10px;
            transition: 0.3s;
          }
          p {
            font-size: 18px;
            color: #333;
            padding-top: 6px;
          }
          &:hover i {
            opacity: 1;
            background-color: #e9e9e9;
          }
        }
      }
      .coming {
        border-radius: 10px;
        background-color: #f5f5f5;
        padding: 15px 0 14px;
        transition: 0.5s;

        h4 {
          font-size: 14px;
          color: #777;
        }
        p {
          font-size: 30px;
          color: var(--text-color);
          transition: 0.3s ease-out;
        }
        &:hover {
          background-color: #e9e9e9;
          p {
            transform: scale(1.1);
          }
        }
      }
    }
    // 可视化部分
    .el-row.title {
      border-bottom: 1px solid #eee;
      margin-bottom: 15px;
      padding: 0 15px;
      .list {
        text-align: right;
        ul {
          li {
            display: inline-block;
            padding: 0 5px;
            span {
              display: inline-block;
              vertical-align: middle;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: #a4a4a4;
            }
          }
        }
      }
    }
  }
}
.init-3 {
  .draft {
    height: 230px;
    padding-top: 15px;
  }
  .progress {
    span {
      display: block;
      font-size: 16px;
      text-align: left;
      padding: 15px 10px 0;
    }
  }
  .map {
    height: 410px;
  }
}

.tips {
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
  h2 {
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    color: rgba(0, 0, 0, 0.6);
  }
}
.map {
  position: relative;
  width: 100%;
  height: 480px;
  padding-top: 50px;
}

</style>
